<template>
  <div class="left">
    <div class="logo">MMALL</div>
    <el-row class="tac">
      <el-col :span="24">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="lightblue"
          route
        >
          <el-menu-item index="1">
            <i class="el-icon-s-home"></i>
            <router-link to="/" slot="title" tag="span">首页</router-link >
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-fold"></i>
              <span>商品</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">
                <router-link to="/Shopmanage" tag="span">商品管理</router-link>
              </el-menu-item>
              <el-menu-item index="2-2">
                <router-link to="/ShopClassManage" tag="span">类别管理</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-success"></i>
              <span>订单</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">
                <router-link to="/OrderManage" tag="span">订单管理</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>用户</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1">
                <router-link to="/UserList" tag="span">用户列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
        return
      // console.log(key, keyPath);
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/mixinScss.scss';

.left {

  @include Size(100%,35rem);
  .logo {

    @include Size(inherit,80px);
    background: rgb(50, 50, 58);
    line-height: 80px;
    @include Font(35px,white);
    box-sizing: border-box;
    padding-left: 20px;
  }
  .tac{
      height: 90%;
      background:rgb(43, 46, 51);
      .el-menu-item{
          box-sizing: border-box !important;
          min-width: 100% !important;

      }
  }
}
</style>